<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>患者管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        :root {
            --primary-color: #3b82f6;
            --secondary-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #06b6d4;
            --light-color: #f3f4f6;
            --dark-color: #1f2937;
        }

        body {
            background-color: #f8fafc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .page-title {
            color: var(--dark-color);
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }

        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #2563eb;
            border-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-primary i {
            margin-right: 0.5rem;
        }

        .card {
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(-5px);
        }

        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead {
            background-color: var(--light-color);
        }

        th, td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        th {
            color: var(--dark-color);
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        tbody tr {
            transition: background-color 0.2s ease;
        }

        tbody tr:hover {
            background-color: #f9fafb;
        }

        .action-links {
            display: flex;
            gap: 0.75rem;
        }

        .action-links a {
            color: #6b7280;
            text-decoration: none;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }

        .action-links a:hover {
            color: var(--primary-color);
        }

        .edit-link {
            color: #10b981;
        }

        .edit-link:hover {
            color: #059669;
        }

        .delete-link {
            color: #ef4444;
        }

        .delete-link:hover {
            color: #dc2626;
        }

        .alert {
            margin-bottom: 1.5rem;
            border-left: 4px solid #10b981;
            background-color: #d1fae5;
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .alert-icon {
            font-size: 1.2rem;
            color: #10b981;
        }

        .alert-message {
            margin: 0;
            color: #065f46;
        }

        .close-alert {
            margin-left: auto;
            color: #6b7280;
            cursor: pointer;
            font-size: 1.2rem;
        }

        .close-alert:hover {
            color: #1f2937;
        }

        .pagination-container {
            display: flex;
            justify-content: flex-end;
            margin-top: 1.5rem;
        }

        .pagination {
            margin: 0;
        }

        .page-link {
            color: #6b7280;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            padding: 0.5rem 0.75rem;
            transition: all 0.2s ease;
        }

        .page-link:hover {
            color: var(--primary-color);
            background-color: #f3f4f6;
            border-color: #d1d5db;
        }

        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .page-item.active .page-link:hover {
            background-color: #2563eb;
            border-color: #2563eb;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <div class="header-container">
        <h1 class="page-title">
            <i class="fa fa-user mr-2" aria-hidden="true"></i> 患者管理系统
        </h1>
        <form action="#" th:action="@{/admin/patient/list}" method="get">
            <input type="text" name="name" placeholder="请输入患者姓名">
            <input type="text" name="id_card" placeholder="请输入患者身份证号">
            <button type="submit">搜索</button>
        </form>
        <div class="action-buttons">
            <a th:href="@{/admin/patient/add}" class="btn btn-primary">
                <i class="fa fa-plus mr-1" aria-hidden="true"></i> 添加患者
            </a>
        </div>
    </div>

    <!-- 提示信息 -->
    <div class="alert" th:if="${message}">
        <i class="fa fa-check-circle alert-icon" aria-hidden="true"></i>
        <p class="alert-message" th:text="${message}"></p>
        <span class="close-alert" aria-hidden="true">&times;</span>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-container">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>出生日期</th>
                        <th>联系电话</th>
                        <th>地址</th>
                        <th>身份证号</th>
                        <th>账户号</th>
                        <th>密码</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="patient : ${patients}">
                        <td th:text="${patient.id}"></td>
                        <td th:text="${patient.name}"></td>
                        <td th:text="${patient.gender}"></td>
                        <td th:text="${patient.age}"></td>
                        <td th:text="${#dates.format(patient.birth_date, 'yyyy-MM-dd')}"></td>
                        <td th:text="${patient.phone}"></td>
                        <td th:text="${patient.address}"></td>
                        <td th:text="${patient.id_card}"></td>
                        <td th:text="${patient.account}"></td>
                        <td th:text="${patient.pwd}"></td>
                        <td class="text-center">
                            <div class="action-links">
                                <a th:href="@{/admin/edit/{id}(id=${patient.id})}" class="edit-link" title="编辑">
                                    <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                </a>
                                <form th:action="@{/admin/delete/{id}(id=${patient.id})}" method="get">
                                    <button type="submit" class="delete-link" title="删除"
                                            onclick="return confirm('确定要删除该患者吗？此操作不可恢复。')">
                                        <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="pagination-container">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 关闭提示信息
    document.querySelector('.close-alert')?.addEventListener('click', function () {
        const alert = this.closest('.alert');
        alert.style.opacity = '0';
        alert.style.transition = 'opacity 0.3s ease';
        setTimeout(() => {
            alert.style.display = 'none';
        }, 300);
    });

    // 表格行悬停效果增强
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach(row => {
        row.addEventListener('mouseenter', function () {
            this.style.transform = 'translateY(-2px)';
            this.style.transition = 'transform 0.2s ease';
        });

        row.addEventListener('mouseleave', function () {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
</body>
</html>
